<!DOCTYPE html>
<html>
	<head>
		<title><%= title %></title>
		<link rel="stylesheet" href="/stylesheets/style.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,
			li,
			ol {
				list-style-type: none;
			}
			body,
			html {
				background: #f1f1f1;
			}
			.article-form {
				width: 1000px;
				margin: 0 auto;
			}
			.article-form .article-form-item {
				display: flex;
				justify-content: start;
				margin-top: 30px;
				line-height: 34px;
			}
			.article-form .article-form-item label {
				width: 160px;
				text-align: right;
				height: 34px;
				line-height: 34px;
			}
			.article-form .article-form-item input {
				height: 34px;
				line-height: 34px;
				border: 1px solid #ccc;
				border-radius: 4px;
				flex-grow: 1;
			}
			#zhuaqu {
				width: 200px;
				text-align: center;
				height: 36px;
				line-height: 36px;
				border: none;
				background: #2878ff;
				color: #fff;
				font-size: 16px;
				margin-top: 30px;
			}
			.proxyTag {
				float: right;
				width: 100px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				background: #fff;
				box-shadow: 3pxpx 0px 3px rgba(0, 0, 0, 0.1);
				font-size: 14px;
				position: relative;
			}
			.proxyBox {
				width: 1000px;
				height: 0px;
				overflow: hidden;
				position: absolute;
				right: 0;
				top: 32px;
				z-index: 999;
				display: flex;
				flex-flow: column;
				background-color: #fff;
				transition: 0.2s all;
				padding: 0px 30px;
				box-sizing: border-box;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
			}
			.proxyBox > ul {
				display: flex;
				list-style-type: none;
				flex-shrink: 0;
				height: 40px;
			}
			.proxyBox > ul > li {
				height: 40px;
				line-height: 40px;
				width: 160px;
				text-align: center;
				background: #fff;
				font-size: 14px;
				cursor: pointer;
			}
			.proxyBox1,
			.proxyBox2 {
				background: #f9f9f9;
				flex-grow: 1;
				display: none;
				height: 500px;
			}
			.proxyBox1.active,
			.proxyBox2.active {
				display: flex;
				flex-flow: column;
			}
			.proxyBox > ul > li.active {
				background: #f9f9f9;
			}
			.proxyTag:hover .proxyBox {
				height: 600px;
				padding: 30px;
			}
			.proxy-form {
				flex-shrink: 0;
				height: 30px;
				margin: 10px 20px;
				display: flex;
				justify-content: start;
				position: relative;
			}
			.proxy-form span {
				background: #fff;
				color: #333;
				text-align: center;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
			}
			.proxy-form input {
				height: 30px;
				line-height: 30px;
				border: none;
				background: #fff;
				box-sizing: border-box;
				outline: none;
				padding-left: 5px;
			}
			.proxy-form a {
				color: #2878ff;
				background: #fff;
				height: 30px;
				line-height: 30px;
				padding: 0 20px;
				border-left: 2px solid #f9f9f9;
				cursor: pointer;
			}
			.proxy-form a:hover {
				background: #f6f6f6;
			}
			.proxy-form a:active {
				background: #f1f1f1;
			}
			.proxy-ip-list {
				display: flex;
				flex-grow: 1;
				overflow: auto;
				padding: 20px;
				flex-wrap: wrap;
			}
			.proxy-ip-list li {
				width: 230px;
				padding: 0 10px;
				margin-bottom: 10px;
				height: 28px;
				line-height: 28px;
				margin-right: 20px;
				background: #fff;
				text-align: left;
				display: flex;
				justify-content: space-between;
			}
			.proxy-ip-list li a {
				cursor: pointer;
			}
			.proxy-org-list {
				padding: 20px;
				flex-wrap: 1;
			}
			.proxy-org-list li {
				height: 36px;
				line-height: 36px;
				background: #fafeff;
				padding: 0 15px;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
			}
			.proxy-org-list li p {
				flex-grow: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.proxy-org-list li span {
				flex-shrink: 0;
			}
			.proxy-org-list li a {
				flex-shrink: 0;
				margin-left: 10px;
				cursor: pointer;
			}
			.data-table {
				position: fixed;
				width: 95%;
				height: 95%;
				left: 50%;
				top: 50%;
				background: #fff;
				transform: translate(-50%, -50%);
				box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
				z-index: 1999;
				padding: 30px;
				transition: 0.2s all;
				box-sizing: border-box;
				display: flex;
				flex-flow: column;
			}
			.data-table.show {
				top: 50%;
			}
			.data-table-close {
				position: absolute;
				right: 20px;
				top: 20px;
				font-size: 40px;
				line-height: 20px;
				cursor: pointer;
			}
			.data-table-close:hover {
				color: #0656ee;
			}
			.data-table > div {
				margin-top: 20px;
				overflow: auto;
				flex-grow: 1;
			}
			.data-table > .data-table-btn {
				flex-grow: 0;
				flex-shrink: 0;
			}
			#upload,
			#isIncluded {
				width: 200px;
				text-align: center;
				height: 36px;
				line-height: 36px;
				border: none;
				background: #2878ff;
				color: #fff;
				font-size: 16px;
				margin-top: 30px;
				margin-right: 20px;
				outline: none;
				flex-shrink: 0;
			}
			.data-table-btn {
				flex-shrink: 0;
				display: flex;
				justify-content: start;
			}
			#upload:hover,
			#isIncluded:hover {
				background: #3989ff;
			}
			#upload:active,
			#isIncluded:active {
				background: #0656ee;
			}
			#data-table {
				width: 100%;
				flex-grow: 1;
				overflow: auto;
			}
			#data-table th {
				height: 40px;
				background: #f1f1f1;
			}
			#data-table td {
				height: 28px;
				border-bottom: 1px solid #f1f1f1;
				position: relative;
			}
			.table-content {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
			.table-content > span {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 28px;
				text-align: center;
				cursor: default;
			}
			.table-content > span:hover {
				background: #f1f9ff;
			}
			.table-content > div {
				position: absolute;
				width: 800px;
				height: auto;
				box-sizing: border-box;
				padding: 20px;
				top: 28px;
				right: 0;
				background: #fafafa;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				display: none;
			}
			.table-content:hover > div {
				display: block;
				z-index: 9;
			}
			.addProxyListBox {
				position: absolute;
				right: 0px;
				top: 30px;
				background: #fff;
				padding: 10px;
				display: none;
			}
			.addProxyListBox textarea {
				display: block;
				outline: none;
				padding: 5px;
			}
			textarea {
				width: 840px;
				height: 200px;
				resize: none;
			}
		</style>
		<script src="/javascripts/jquery-1.9.1.min.js"></script>
		<script>
			Date.prototype.format = function (fmt) {
				var o = {
					'M+': this.getMonth() + 1, //月份
					'd+': this.getDate(), //日
					'h+': this.getHours(), //小时
					'm+': this.getMinutes(), //分
					's+': this.getSeconds(), //秒
					'q+': Math.floor((this.getMonth() + 3) / 3), //季度
					S: this.getMilliseconds(), //毫秒
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
					}
				}
				return fmt;
			};
		</script>
	</head>
	<body>
		<div id="app">
			<div class="article-form">
				<h2>
					数据抓取
					<div class="proxyTag">
						代理ip管理
						<div class="proxyBox">
							<ul class="proxyBox-head">
								<li class="active">代理IP池</li>
								<li>代理商管理</li>
							</ul>
							<div class="proxyBox1 active">
								<div class="proxy-form">
									<span>http://</span>
									<input style="width: 200px" type="text" id="ip" placeholder="代理ip地址" />
									<span>:</span>
									<input style="width: 50px" type="text" id="port" placeholder="端口号" />
									<a id="addProxy">添加代理IP</a>
									<a id="getProxyList">获取免费代理IP</a>
									<a id="testProxyList">清除不可用IP</a>
									<a id="addProxyList"> 批量添加 </a>
									<div class="addProxyListBox">
										<textarea id="addProxyListValue" style="width: 200px; height: 100px; resize: none"></textarea>
										<a id="btn-add">添加</a>
										<a id="btn-cancel">取消</a>
									</div>
								</div>
								<ul class="proxy-ip-list"></ul>
							</div>
							<div class="proxyBox2">
								<div class="proxy-form">
									<span>代理商接口URL:</span>
									<input style="flex-grow: 1" type="text" id="proxyUrl" placeholder="代理商获取代理IP的接口地址" />
									<a id="getProxy">添加代理商接口</a>
								</div>
								<ul class="proxy-org-list"></ul>
							</div>
						</div>
					</div>
				</h2>
				<div class="article-form-item">
					<label>公司名称：</label>
					<input name="listUrl" id="listUrl" v-model="name" />
				</div>
				<div style="margin-bottom: 8px; text-align: center">
					<button @click="zhuaqu()">抓取</button>
					<button @click="show()">抓取结果</button>
					<div id="status" style="height: 300px; overflow: auto; background: #fff; margin-top: 20px">
						<p v-for="(item,index) in logList" :key="index">{{ item }}</p>
					</div>
				</div>
			</div>
			<div class="data-table" v-if="showTab">
				<i class="data-table-close" @click="closeTab()">×</i>
				<div>
					<table id="data-table">
						<thead>
							<tr>
								<th style="width: 30%">企业名称</th>
								<th style="width: 10%">查询结果</th>
								<th style="width: 60%">返回内容</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in dataList" :key="index">
								<td>{{ item.name }}</td>
								<td>{{ item.status }}</td>
								<td><div v-html="item.result"></div></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div style="width: 0; height: 0; display: none" id="dataIframe"></div>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					name: '',
					dataList: [],
					info: {},
					showTab: false,
					logList: ['系统初始化成功!'],
					link: '/search?key=',
					contentReg:`<div class="index_list-wrap___axcs"><div class="index_search-box__7YVh6">{content}</div></div><div class="index_result-recommend__3mvCR">`,
				},
				mounted() {
					if(localStorage.getItem("dataList")){
						this.dataList = JSON.parse(localStorage.getItem('dataList'));
					}
					console.log(this.dataList);
				},
				methods: {
					qn() {
						for (var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 8, a = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 10, n = 0, i = []; n < e; )
							n++,
							i.push(Math.floor(10 * Math.random()));
						var t = "".concat((new Date).getTime());
						t = t.substring(0, a);
						var r = "".concat(t, ".").concat(i.join(""));
						return r
					},
					show() {
						this.showTab = true;
					},
					closeTab() {
						this.showTab = false;
					},
					zhuaqu() {
						this.getEnterpriseInfo();
						this.show();
					},
					getEnterpriseInfo(){
						this.logList.push("开始解析地址，抓取数据:"+this.name);
						$.post(
							'/getDetail',
							{
								url: this.link+encodeURI(this.name)+"&sessionNo="+this.qn(),
							},
							(data)=>{
								data.content = data.content.replace(/(\s*)(<.+?\/{0,1}>)(\s*)/g, '$2').replace(/\r|\n|\r\n/g, '');
								const regText = this.contentReg
									.replace(/(\s*)(<.+?\/{0,1}>)(\s*)/g, '$2')
									.replace(/\r|\n|\r\n/g, '')
									.replace('{content}', '(.+?)');
								const reg = new RegExp(regText);
								console.log(reg);
								console.log(data.content);
								const result = reg.exec(data.content);
								let res;
								if(result && result.length>0){
									res = result[0];
									$("#dataIframe").html("res");
									const link = $("#dataIframe").find(".index_search-box__7YVh6").eq(0).find(".index_alink__zcia5").eq(0).attr("href");
								}else{
									res = '';
								}
								const obj = {
									name:this.name,
									status:data.status,
									result:res
								};

								this.dataList.push(obj);
								localStorage.setItem("dataList",JSON.stringify(this.dataList));
								
								
							}
						);
					}
				},
			});
		</script>
	</body>
</html>
